Google Charts এ Chart Title, Axis Labels, এবং Legends যোগ করা চার্টের তথ্য আরও স্পষ্টভাবে উপস্থাপন করতে সহায়ক। এই উপাদানগুলি ডেটার আরও গভীর বিশ্লেষণ এবং ব্যবহারকারীর জন্য সঠিক ধারণা তৈরি করতে সাহায্য করে।
১. Chart Title যোগ করা
Chart Title হলো চার্টের উপরে প্রদর্শিত টেক্সট, যা চার্টের বিষয়বস্তু বা ডেটা সম্পর্কে সংক্ষিপ্ত ধারণা প্রদান করে। আপনি Chart Title টিকে কাস্টমাইজ করতে পারেন যেমন: ফন্ট সাইজ, রঙ, এবং অবস্থান।
উদাহরণ:
var options = {
title: 'Company Sales Over the Years', // Chart title
titleTextStyle: { // Title customization
fontSize: 18,
bold: true,
color: 'blue'
}
};
এখানে, title প্রোপার্টি দ্বারা আপনি চার্টের শিরোনাম নির্ধারণ করতে পারবেন এবং titleTextStyle এর মাধ্যমে শিরোনামের স্টাইল কাস্টমাইজ করতে পারবেন।
২. Axis Labels যোগ করা
Axis Labels হল X-axis (Horizontal axis) এবং Y-axis (Vertical axis) এর লেবেল, যা চার্টের অক্ষগুলোকে চিহ্নিত করে। এটি ব্যবহারকারীদের জন্য ডেটার রেঞ্জ বা ইউনিট পরিষ্কার করে।
উদাহরণ:
var options = {
title: 'Company Sales Over the Years',
hAxis: {
title: 'Year', // X-axis label
titleTextStyle: { fontSize: 14, bold: true }
},
vAxis: {
title: 'Sales (in USD)', // Y-axis label
titleTextStyle: { fontSize: 14, bold: true }
}
};
এখানে:
- hAxis প্রোপার্টির মাধ্যমে X-axis এর লেবেল এবং তার স্টাইল নির্ধারণ করা হয়েছে।
- vAxis প্রোপার্টির মাধ্যমে Y-axis এর লেবেল এবং তার স্টাইল নির্ধারণ করা হয়েছে।
৩. Legends যোগ করা
Legends হল চার্টের নীচে বা পাশে প্রদর্শিত একটি চিহ্ন, যা বিভিন্ন ডেটা সিরিজ বা ক্যাটেগরির প্রতিনিধিত্ব করে। এটি চার্টের ভিজ্যুয়াল ক্লিয়ারিটি উন্নত করতে সাহায্য করে। আপনি legend এর অবস্থান, স্টাইল এবং প্রদর্শন কাস্টমাইজ করতে পারেন।
উদাহরণ:
var options = {
title: 'Company Sales Over the Years',
legend: {
position: 'bottom', // Legend position: top, bottom, left, right
textStyle: { fontSize: 12, color: 'green', bold: true }
}
};
এখানে, legend প্রোপার্টির মাধ্যমে আপনি লেজেন্ডের অবস্থান এবং টেক্সটের স্টাইল কাস্টমাইজ করতে পারেন।
পূর্ণ কোড উদাহরণ (Chart Title, Axis Labels, এবং Legends সহ)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Profit'],
['2020', 1000, 400],
['2021', 1170, 460],
['2022', 660, 1120],
['2023', 1030, 540]
]);
var options = {
title: 'Company Sales and Profit Over the Years', // Chart Title
titleTextStyle: {
fontSize: 18,
bold: true,
color: 'blue'
},
hAxis: {
title: 'Year', // X-axis label
titleTextStyle: { fontSize: 14, bold: true }
},
vAxis: {
title: 'Amount (in USD)', // Y-axis label
titleTextStyle: { fontSize: 14, bold: true }
},
legend: {
position: 'bottom', // Legend position
textStyle: { fontSize: 12, color: 'green', bold: true }
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Title, Axis Labels, and Legends</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Google Charts এ Chart Title, Axis Labels, এবং Legends যোগ করা আপনার চার্টকে আরও বোধগম্য এবং ব্যবহারকারী-বান্ধব করে তোলে। এগুলোর মাধ্যমে আপনি আপনার ডেটাকে আরও স্পষ্টভাবে উপস্থাপন করতে পারবেন, যাতে ব্যবহারকারীরা সহজেই তথ্য বুঝতে পারে। এই কাস্টমাইজেশনগুলি আপনার চার্টকে আরও কার্যকর এবং প্রফেশনাল দেখাতে সাহায্য করবে।
Read more
